<template >
  <div>
    <modaltemplate>
      <template v-slot:changtai="slotProps">
        {{ slotProps.menuitem }}
        <div class="warp">
          <div class="item-container" v-for="(item,index) in chengshizhisheng">
            <div class="name">{{ item.name }}</div>
            <div class="bottom-container">
              <div class="info" v-for="(child,childindex) in item.item" :key="childindex">
                <div class="name">{{ child.name }}</div>
                <div class="value-unit">
                  {{ child.value }}
                  <span>{{ child.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <boxrow :itemlists="data[slotProps.menuitem]" /> -->
      </template>
    </modaltemplate>
  </div>
</template>
<script lang="ts">
import modaltemplate from '@/components/modeljiading.vue'
import { reactive } from 'vue'
import boxrow from '@/components/boxrow.vue'
import '../font/bebas/bebas.css'
export default {
  name: 'jiading',
  components: {
    modaltemplate,
    boxrow
  },
  props: {
    menuitem: Array,
  },
  setup(props) {
    const chengshizhisheng = [
      { "name": "12345事件", item: [{ name: "今日", value: '53', unit: '起' }, { name: "本周", value: "53", unit: "起" }] },
      { "name": "119案件", item: [{ name: "今日", value: '8', unit: '起' }, { name: "本周", value: "23", unit: "起" }] },
      { "name": "110案件", item: [{ name: "今日", value: '828', unit: '起' }, { name: "本周", value: "5064", unit: "起" }] },
      { "name": "重点舆情	", item: [{ name: "今日", value: '0', unit: '起' }, { name: "本周", value: "0", unit: "起" }] },
      { "name": "突发事件	", item: [{ name: "今日", value: '0', unit: '起' }, { name: "本周", value: "0", unit: "起" }] },
    ]
    //城市之感
    const chengshizhigan = [
      { "name": "烟感	", item: [{ name: "安装", value: '4934', unit: '个' }, { name: "告警", value: "12", unit: "次" }] },
      { "name": "井盖传感	", item: [{ name: "安装", value: '303', unit: '个' }, { name: "告警", value: "12", unit: "次" }] },
      { "name": "果壳箱满溢监测	", item: [{ name: "安装", value: '150', unit: '个' }, { name: "告警", value: "34", unit: "次" }] },
      { "name": "电弧监测	", item: [{ name: "安装", value: '98', unit: '个' }, { name: "告警", value: "2", unit: "次" }] },
      { "name": "消防水压监测	", item: [{ name: "安装", value: '52', unit: '个' }, { name: "告警", value: "0", unit: "次" }] },
      { "name": "可燃气体监测	", item: [{ name: "安装", value: '38', unit: '个' }, { name: "告警", value: "0", unit: "次" }] },
      { "name": "单元门禁	", item: [{ name: "安装", value: '740', unit: '个' }, { name: "告警", value: "0", unit: "次" }] },
      { "name": "水质监测	", item: [{ name: "安装", value: '38', unit: '个' }, { name: "告警", value: "0", unit: "次" }] },
    ]
    const chengshizhiyan = [
      { "name": "公安监控", item: [{ name: "安装", value: '70353', unit: '台' }, { name: "告警", value: '0', unit: '次' }] },
      { "name": "社会面监控", item: [{ name: "安装", value: '14010', unit: '台' }, { name: "告警", value: '0', unit: '次' }] },
      { "name": "垃圾分类监控", item: [{ name: "安装", value: '101', unit: '台' }, { name: "告警", value: '26', unit: '次' }] },
      { "name": "单兵设备", item: [{ name: "安装", value: '478', unit: '台' }, { name: "告警", value: '0', unit: '次' }] },
    ]


    //     // 城市呼吸
    const chengshihuxi = [
      { "name": "AQI", item: [{ name: "", value: '24', unit: '' }] },
      { "name": "PM2.5", item: [{ name: "", value: '14', unit: '' }] },
      { "name": "气温", item: [{ name: "", value: '25℃', unit: '' }] },
      { "name": "PM10", item: [{ name: "", value: '24', unit: '' }] },
      { "name": "降雨量", item: [{ name: "", value: '10', unit: 'mm' }] },
      { "name": "气象预警", item: [{ name: "", value: '无', unit: '' }] },
      { "name": "下立交防汛", item: [{ name: "总数", value: '93', unit: '个' }, { name: "告警", value: '2', unit: '次' }] },
      { "name": "生活干垃圾产生量", item: [{ name: "", value: '1001', unit: '吨/日' }] },
      { "name": "生活湿垃圾产生量", item: [{ name: "", value: '363', unit: '吨/日' }] },
      { "name": "可回收干垃圾产生量", item: [{ name: "", value: '403', unit: '吨/日' }] },
      { "name": "垃圾末端处置量", item: [{ name: "", value: '1767', unit: '吨/日' }] },
      { "name": "污水处理量", item: [{ name: "", value: '43.73', unit: '万吨/日' }] },
      { "name": "公交车排班", item: [{ name: "", value: '9092', unit: '车次' }] },
      { "name": "公交车已运行", item: [{ name: "", value: '2316', unit: '车次' }] },
      { "name": "公交车准点率", item: [{ name: "", value: '98.20', unit: '%' }] },
      { "name": "疫情隔离", item: [{ name: "新增", value: '18', unit: '人' }, { name: "解除", value: '22', unit: '人' }] },
    ]
    const chengshiweidu = [
      { "name": "民政救助", item: [{ name: "", value: '20058', unit: '人次/月' }] },
      { "name": "120急救", item: [{ name: "昨日", value: '275', unit: '起' }, { name: "本周", value: '0', unit: '起' }] },
      { "name": " 失业人口登记人数", item: [{ name: "", value: '4348', unit: '人' }] },
      { "name": "用水总量", item: [{ name: "昨日", value: '40.21', unit: '万吨' }, { name: "本月", value: '598.09', unit: '万吨' }] },
      { "name": "用电总量", item: [{ name: "昨日", value: '2408', unit: '万千瓦时' }, { name: "本月", value: '40660', unit: '万千瓦时' }] },
      { "name": "用气总量", item: [{ name: "昨日", value: '275', unit: '万立方米' }, { name: "本月", value: '2415', unit: '万立方米' }] },
    ]
    //     // 城市脉搏
    const chengshimaibo = [
      { "name": "交通情况	", item: [{ name: "拥堵指数", value: '1.43', unit: '' }, { name: "拥堵路段", value: "5", unit: "条" }, { name: "拥堵总长度", value: "3071", unit: "米" }] },
      { "name": "客流	", item: [{ name: "昨日", value: '12.68', unit: '万人次' }, { name: "本周", value: "152.16", unit: "万人次" }] },
      { "name": "景区人流	", item: [{ name: "", value: '35727', unit: '人次' }] },
      { "name": "商业广场人流", item: [{ name: "", value: '26031', unit: '人次' }] },
      { "name": "宗教场所人流", item: [{ name: "", value: '2963', unit: '人次' }] },
      { "name": "交通枢纽人流", item: [{ name: "", value: '2983', unit: '人次' }] },
    ]
    return { chengshizhisheng: reactive(chengshizhisheng) }
  }
}
</script>
<style lang="scss" scoped>
.warp {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>
<style lang="less" scoped>
.item-container {
  height: 112px;
  width: 33%;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  border-left: 2px solid rgba(7, 48, 74, 0.47);
  border-bottom: 2px solid rgba(7, 48, 74, 0.47);
}

.item-container:nth-child(2 + 3n) {
  height: 112px;
  width: 33%;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  // border-left: 2px solid rgba(7,48,74,0.47);
  border-bottom: 2px solid rgba(7, 48, 74, 0.47);
}

.name {
  font-size: 20px !important;
  font-family: Microsoft YaHei Semibold, Microsoft YaHei Semibold-Semibold;
  font-weight: 600;
}

.bottom-container {
  display: flex;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;

  .info {
    flex: 1;

    .name {
      font-size: 14px !important;
      font-weight: 400;
    }

    .value-unit {
      font-size: 22px !important;
      font-weight: 700;
      color: #10f7ff;
      font-family: "bebas";
      span {
        font-size: 12px;
        font-weight: normal;
      }
    }
  }
}
</style>